<template>
	<view class="bg">
		<view class="flex-between">


			<view class="return-index flex" @click="returnHome()">

				<swiper class="swiper" :autoplay='autoplayBoolen' vertical=true circular :indicator-dots="indicatorDots"
					:duration="duration">
					<block v-for="(item,i) in shareList" :key="i">
						<swiper-item>
							<view class="swiper-item uni-bg-red flex">
								<image class="noticeImg" src="../../../static/会员卡首页2/矩形 141.png" mode=""></image>

								<text class="font-overflow" style="color: #fff;font-size: 30rpx;max-width: 380rpx;">{{item.userName }}前一分钟参与了拼团 </text>
							</view>

						</swiper-item>
					</block>

				</swiper>
				
			
			</view>
	        
		</view>
		<view class="card">
				<image class="" style="height: 150rpx;" src="../../../static/会员卡营销用户端/蒙版1.png" mode="aspectFit"></image>
			<view class="pendingPayDetail ">
				<view class="orderPageDescribe flex-start" >
					<view>
						<image class="img" src="https://n8.weijuyunke.com/2024-05-30/44103202405301121384516.png" mode=""></image>
					</view>
					<view class="flex-column-between-start margin-left_10rpx" style="height: 232rpx;width:414rpx;">
						<view class="font-overflow2">
							满城红洛川红富士苹果2/ 5/10斤装 脆甜多汁
						</view>
						<view class="font-overflow" style="width: 100%; color: rgb(153, 153, 153);">
							<text>满城红洛川红富士苹果2/ 5/10斤装 脆甜多汁</text>
						</view>
						<view class="example-body">
							<view style="color: rgb(244, 80, 4);font-weight: 700;">
								当前价:￥55 <text style="color: rgb(153, 153, 153);margin-left: 20rpx;font-weight: 500;">日常价:￥55</text>
							</view>
						</view>
			
					
							<view class="flex">
								<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true"
									:showDay="false" :day="0" :hour="24" :minute="0" :second="0"
									@timeup="timeup"></cc-countdown>
									<view  style="margin-left: 10rpx;">
										后结束
									</view>
							</view>
						
					</view>
			
			
				</view>
				
			</view>
			<pro-gress class="border-bottom-f7f7f7 padding-bottom_20rpx" :list="Steps"
				:StepInfo="StepInfos"></pro-gress>
		</view>
	</view>
</template>

<script>
	import proGress from '@/components/progress2/progress.vue';
	export default {
		components: {
		
			proGress
		},
		data() {
			return {
				duration: 1000,
				indicatorDots: false,
				autoplayBoolen: true,
				token: uni.getStorageSync('login').token,
				list: [],
				classifyList: [],
				shareList: [{
					userName: '小明小明小明小明小明小明小明',

				}, {
					userName: '小红',

				}, ],
				navIndex: 0,
				tabList: [],
				orderInfo:null,
				Steps: [{
					p_price: '56.00',
					p_number: 3
				}, {
					p_price: '35.00',
					p_number: 10
				}, {
					p_price: '15.00',
					p_number: 15
				}, {
					p_price: '5.00',
					p_number: 20
				}],
				StepInfos: {
					// 0 33 66 99
					Current: 33.4, //百分比（先传条数即可）
					Sum: 4 //共多少步骤(Number类型)
				},

			}
		},
		onLoad() {
             this.initFn()
		},
		methods:{
			initFn() {
				let dd = (100 / (Number(this.Steps.length) - 1)) * 2;
				console.log('dd', dd)
				this.StepInfos = {
					// 0 33 66 99
					Current: dd.toFixed(2), //百分比（先传条数即可）
					Sum: this.Steps.length //共多少步骤(Number类型)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.bg {
		background: linear-gradient(180.00deg, rgb(255, 231, 196), rgba(196, 196, 196, 0) 100%);
		height: 100vh;
        
		.return-index {
			margin-top: 30rpx;
			
			height: 76rpx;
			border-radius: 0rpx 40rpx 40rpx 0rpx;
			background: rgba(33, 33, 33, 0.20);

			image {

				height: 26rpx;
				margin-right: 8rpx;
			}

			view {
				color: #fff;
				font-size: 24rpx;
			}
			.swiper {
				margin-bottom: 10rpx;
				border-radius: 30rpx;
			
				width: 480rpx;
				height: 76rpx;

			}
			
			.swiper-item {
				.noticeImg {
					margin-right: 10rpx;
					height: 24px;
					width: 24px;
				}
			
				width: 480rpx;
				height: 76rpx;
				line-height: 76rpx;
				text-align: center;
			}
			
			.swiper-list {
				margin-top: 40rpx;
				margin-bottom: 0;
			}
		}
		.card{
			margin: 20rpx  18rpx 0;
		
			height: 1004rpx;
			border-radius: 20rpx;
			
			background: rgb(255, 255, 255);
			.pendingPayDetail {
				padding: 0rpx 20rpx 26rpx;
			    
				width: 672rpx;
				box-sizing: border-box;
				// height: 362rpx;
				border-radius: 10px;
				background: rgb(255, 255, 255);
			
			
				.orderPageDescribe {
					padding-bottom: 10rpx;
					// border-bottom: 1px solid rgb(238, 238, 238);
			
					.img {
						width: 230.02rpx;
						height: 232rpx;
					}
			
				}
			
				.customerService {
					margin-top: 25rpx;
					color: rgb(51, 51, 51);
			
					font-size: 32rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>